<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["columnchart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
   // data.addColumn('number', 'Expenses');
    data.addRows(12);
    data.setValue(0, 0, '0-2');
    data.setValue(0, 1, 1000);
    data.setValue(1, 0, '2-4');
    data.setValue(1, 1, 1170);
    data.setValue(2, 0, '4-6');
    data.setValue(2, 1, 660);
    data.setValue(3, 0, '6-8');
    data.setValue(3, 1, 1030);
    data.setValue(4, 0, '8-10');
    data.setValue(4, 1, 900);
    data.setValue(5, 0, '10-12');
    data.setValue(5, 1, 200);
    data.setValue(6, 0, '12-24');
    data.setValue(6, 1, 500);
    data.setValue(7, 0, '14-16');
    data.setValue(7, 1, 700);
    data.setValue(8, 0, '16-18');
    data.setValue(8, 1, 1230);
    data.setValue(9, 0, '18-20');
    data.setValue(9, 1, 2700);
    data.setValue(10, 0, '20-22');
    data.setValue(10, 1, 930);
    data.setValue(11, 0, '22-24');
    data.setValue(11, 1, 300);

    var chart = new google.visualization.ColumnChart(document.getElementById('HotHours'));
    chart.draw(data, 
			{width: 380, 
			 height: 180, 
			 is3D: false, 
			 title: 'Activity throughout the day', 
			 legend: 'none', 
			 colors:[{color:'9bbb59', darker:'680000'}]
		});
  }
</script>


</head>
<body>

<div id = "container">
<div id = "header">Wave Insights</div>

<div id="LeftBar">
	<!-- total number of blips -->
	<div id="TotalNumOfBlips"> <div class="ValueExpressed"><!-- Niv: number of blips-->54</div> 
	blips, Last <!-- Niv: in the last X hours -->4 hours ago </div>
		
	<!-- no. of users-->
	<div id="NumOfUsers_active"><div class="ValueExpressed"> <!-- Niv: number of users--> 22 </div> Users -- 
	<div class="ValueExpressed"> <!-- Niv: number of users active --> 23% </div>  are active  </div>

	<!-- no. of deleted users-->
	<div id="NumOfLoggedOffUsers"> <div class="ValueExpressed"> <!-- Niv: users left in the web--> 12 </div> Users left the wave</div>

	<!-- ratio of active users-->
	<div id = "MostActiveUsers" >Most Active <div class="ValueExpressed"> <!-- Niv: Most active users-->John Smith </div> 
	<div id = "clickForShow">(Who else ?)</div> 
	<div id="HiddenValue_Users"> 
		<div class="ValueExpressed">
			<!-- Niv: additional active users--> Shai wol, Niv C, Eliahu ...
		</div>
	</div>
	
	</div>
</div>
<div id="RightBar">
	<!-- hot hours -->
	<div id="HotHours"> </div>
</div>
	<!-- tag cloud  bootom -->
	
	<div id= "taglcoud"> 
		<div id="TagCloudReg">Holiday</div> 
		<div id="TagCloudSmall">Movies</div> 
		<div id="TagCloudLarge">Wave</div>
		<div id="TagCloudLarge">Twitter</div>
		<div id="TagCloudXLarge">Fun</div> 
		<div id="TagCloudSmall">Misha</div> 
	  	<div id="TagCloudReg">Calderon</div> 
	    <div id="TagCloudReg">Dana</div> 
	    <div id="TagCloudXLarge">Neviot</div>
	    <div id="TagCloudLarge">Laptop</div> 
	    <div id="TagCloudReg">MTA</div>	
		<div id="TagCloudReg">Stam</div>	
		<div id="TagCloudReg">Internet</div>	
		<div id="TagCloudSmall">Mastik</div>	
		<div id="TagCloudReg">Apple</div>
		<div id="TagCloudXLarge">Mac</div>
		<div id="TagCloudSmall">Marathon</div>	
	</div>
	
</div>

<div id = "footer"></div>

</body>
</html>